<script setup>
defineOptions({
  name: 'CartCount'
})

const props = defineProps({
  value: {
    type: Number,
    default: 1
  }
})

const emit = defineEmits(['input'])

const plus = () => {
  emit('input', props.value + 1)
}
const minus = () => {
  if (props.value <= 1) {
    return
  }
  emit('input', props.value - 1)
}
const change = (e) => {
  emit('input', e.target.value)
}
</script>

<template>
  <div class="count">
    <button class="btn" @click="minus" :class="{ disabled: value === 1 }">
      -
    </button>
    <input type="number" :value="value" @change="change" />
    <button class="btn" @click="plus">+</button>
  </div>
</template>

<style lang="less" scoped>
.count {
  width: 106px;
  height: 25px;
  font-size: 14px;

  .btn {
    width: 30px;
    height: 25px;
    background: rgb(242, 243, 245);
    border: none;
    font-size: 14px;
  }

  input {
    width: 40px;
    height: 25px;
    border: 0;
    color: rgb(50, 50, 51);
    font-size: 13px;
    background: rgb(242, 243, 245);
    margin: 0 2px;
    text-align: center;
  }

  .disabled {
    color: #c8c9cc !important;
  }
}
</style>
